<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <div>
    <van-nav-bar
      class="app-1"
      title="消息中心"
      left-text=""
      left-arrow
      @click-left="index()"
    />
     <div class="xian"></div>
    <div class="app-2" @click="tiao()">
      <div class="app-img1">
        <img
          style="margin-top: 12px; margin-left: 11px"
          src="../assets/消息.svg"
          alt=""
        />
      </div>
      <div class="app-font" ><span>系统消息</span></div>
    </div>
    <!--  -->
    <div class="app-2" @click="tiao()">
      <div class="app-img1">
        <img
          style="margin-top: 12px; margin-left: 11px"
          src="../assets/消息1.svg"
          alt=""
        />
      </div>
      <div class="app-font"><span>系统消息</span></div>
    </div>
    <!--  -->
    <div class="app-2" @click="tiao()">
      <div class="app-img1">
        <img
          style="margin-top: 12px; margin-left: 11px"
          src="../assets/消息2.svg"
          alt=""
        />
      </div>
      <div class="app-font"><span>系统消息</span></div>
    </div>
    <!--  -->
    <div class="app-2" @click="tiao()">
      <div class="app-img1">
        <img
          style="margin-top: 12px; margin-left: 11px"
          src="../assets/消息3.svg"
          alt=""
        />
      </div>
      <div class="app-font"><span>系统消息</span></div>
    </div>
    <!--  -->
    <div class="xian"></div>
    <!--  -->
    <div class="app-3" @click="tiao()">
      <div class="app-img2">
        <img
          style="margin-top: 10px; margin-left: 10px"
          src="../assets/极美.svg"
          alt=""
        />
      </div>
 <div class="app-font1"><span>极美在线官方客服 </span></div>
 <div class="guan"><span style="line-height:-10px">官方</span> </div>
     
    </div>
    <!--  -->
    <div class="app-3" @click="tiao()">
      <div class="app-img2">
        <img
          style="margin-top: 10px; margin-left: 10px"
          src="../assets/极美.svg"
          alt=""
        />
      </div>

     
    </div>

   
  </div>
   </van-pull-refresh>
</template>

<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
       isLoading: false,
    }
  },
  methods: {
    //刷新效果
     onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    // 跳转首页
    index(){
this.$router.push({path:"/index"})
    },
    // 跳转聊天记录
    tiao(){
      
      this.$router.push({path:"/ji"})
    }
  }
};
</script>

<style>
.guan{
  width: 35px;
  height: 20px;
  background-color: rgba(183, 138, 101, 1);
  color: #ffff;
  float:left;
  text-align: center;
  margin-right: 50px;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 80%;
  
}
/*  */
.app-font1{
    float: left;
 
  margin-left: 10px;
  font-size: 80%;
  line-height: 30px;
  width: 120px;
}
/* xian */
.xian{
    width: 100%;
    height: 15px;
    float: left;
    background-color: #efecec;
}


.app-img2 {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  float: left;
  margin-top: 5px;
  margin-left: 10px;
  background-color: rgba(255, 206, 191, 0.298039215686275);
}
.app-3 {
  width: 100%;
  background-color: transparent;
  float: left;
  height: 60px;
  margin-top: 14px;
  border-bottom: solid #efecec;
 
}
/*  */
.app-font {
  float: left;
  text-align: center;
  margin-left: 10px;
  font-size: 90%;
  line-height: 50px;
}
.app-img1 {
  width: 55px;
  height: 55px;
  float: left;
  background-color: rgba(183, 138, 101, 1);
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
}
.app-2 {
  width: 100%;
  height: 70px;
  float: left;
  background-color: transparent;
  display: flex;
  color: #333333;
  border-bottom: solid #efecec;
}
.app-1 {
  width: 100%;
  height: 60px;
  float: left;
  font-size: 30px;
}
</style>